@import "xz-cloud-base";


@title:#121212;
@dec:#666666;
@criColor:#c9c9c9;

.select2 .select3.select4{
  position: relative;
}

.sectionTitle{
  position: absolute;
  width: 100%;
  text-align: center;
  .setMargin-top(70);
  .fs(35);
  color: @title;
}
.top{
  position: relative;
}
.top >img{
  width: 100%;
}
.conner-title{
  position: relative;
  width: 100%;
  .setHeight(44);
}
.conner-title >.nospan{
  .sw(14);
  .setHeight(14);
  vertical-align: middle;
  background-color:transparent !important;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;

}
.conner-title >span{
  position: absolute;
  top: 26%;
  left: -3%;
  .sw(14);
  .setHeight(14);
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background-color:@criColor;
}
.conner-title > p{
  width: 93%;
  .setMargin-left(10);
  .fs(28);
  color: @dec;

}

.listShow{
  position: absolute;
  left: 6%;
  width: 94%;
}
.top65{
  top:65%;
}
.top70{
  top:70%;
}
.top73{
  top:73%;
}
.top75{
  top:78%;
}


.subhead {
  position: absolute;
  width: 100%;
  >h1{
    width: 100%;
    text-align: center;
    .setMargin-top(60);
    .fs(35);
    color: @title;

  }
  >h2{
    position: relative;
    width: 100%;
    .setPadding-bottom(5);
    text-align: center;
    .fs(23);
    color: @dec;
    font-weight: 400;
  }
}
.select2{
  .bottom{
    position: relative;
    width: 100%;
    background-color: #f7f7f7;
    >.bottom-cot{
      padding-top: 6%;
      width: 100%;
      h1{
        width: 100%;
        text-align: center;
        .fs(35);
        color: @title;
      }
      .tubiao{
        width: 15%;
        margin: 0 auto;
        .setMargin-top(50);
      }
      .bottom-img {
        width: 70%;
        margin: 0 auto;
        .setMargin-top(45);
      }
      .bottom-des{
        width: 100%;
        p{
          width: 100%;
          text-align: center;
          .fs(30);
          color:@dec;
        }
      }
    }
  }
}
.select3 {
  position: relative;
  overflow: hidden;


  .div-left{
    margin-left: 7%;

  }
  .div-right{
    margin-left: 6%;
  }

  >div{
    float: left;
    width: 40%;
    background-color: #f8f8f8;
    >img{
      width: 33%;
      margin: 0 auto;
      .setMargin-top(45);
    }
    >h1{
      width: 100%;
      text-align: center;
      .fs(35);
    }
    >p{
      width: 100%;
      text-align: center;
      color:@dec;
      .fs(27);
    }
  }
}



.bg-color{
  background-color: #f3f3f3;
}

.left-border{
  border-bottom: 2px solid #ebebeb;
  border-right: 2px solid #ebebeb;
}
.right-border{
  border-bottom: 2px solid #ebebeb;
}


.select4{
  position: relative;
  width: 100%;
  >h1{
    width: 100%;
    .setMargin-top(70);
    .fs(35);
    text-align: center;
    color: #121212;
  }
  >h2{
    width: 100%;
    text-align: center;
    font-weight: 400;
    .fs(28);
    color: #121212;
  }
  .select4-title-des{
    //position: relative;
    width: 90%;
    margin-left: 5%;
    text-align: justify;
    font-weight: 400;
    color: @dec;
    .fs(28);
  }

  .select4-tubiao{
    width: 92%;
    margin-left: 4%;
    >div{

      >img{
        width: 55%;
        margin: 0 auto;
      }
      >p{
        color: @dec;
        width: 100%;
        text-align: center;
        .setMargin-top(20);
        .fs(26);
        >span{
          color: #000;
        }
      }
    }

  }

  .select4-wenzi{
    width: 88%;
    margin-left: 6%;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    >div{
      >div{
        color: @dec;
        .fs(28);
        text-align: center;
      }
    }
  }
  .select4-list{
    width: 91%;
    position: relative;
    padding-left: 9%;
    .setPadding-bottom(60);
    .setPadding-top(60);
    > span{
      .sw(34);
      .setHeight(34);
      position: absolute;
      top: 35%;
      left: 9%;
      .setLineHeight(34);
      background-color: #d4d4d4;
      color: #ffffff;
      border-radius: 50%;
      text-align: center;
      .fs(30);
    }
    >p{
      position: absolute;
      left:16%;

      width: 80%;
      top: 32%;

      /* margin-left: 3px; */
      .fs(30);
    }
    >.many-text{
      position: absolute;
      width: 80%;
      .setMargin-left(5);

      .fs(25);
    }
  }

  .select4-list-add{
    width: 100%;
    .setPadding-bottom(20);
    .setPadding-top(10);
  }

  .select4-des{
    width: 100%;
    background-color: #f3f3f3;
    .setPadding-top(60);
    padding-bottom: 14%;
    margin-top: 6%;
    >h1{
      width: 100%;
      text-align: center;

      .fs(35);
    }
    >h2{
      width: 100%;
      text-align: center;
      .fs(28);
    }

    .select4-dataImg{
      width: 80%;
      margin: 0 auto;
      .setMargin-top(60);
      .setMargin-bottom(60);
    }

    .select4-type-list{
      width: 79%;
      position: relative;
      /* margin-left: 6%; */
      margin: 0 auto;
      .setPadding-top(70);
      .setPadding-left(40);
      .setPadding-right(40);
      padding-bottom: 4%;
      border-radius: 10px;
      background-color: #ffffff;


      .select4-type-list-conner{
        position: absolute;
        .sw(25);
        .setHeight(25);
        left: 50%;
        top:0%;
        transform:translate(-50%,-50%) rotate(45deg);
        -ms-transform:translate(-50%,-50%) rotate(45deg); 	/* IE 9 */
        -moz-transform:translate(-50%,-50%) rotate(45deg); 	/* Firefox */
        -webkit-transform:translate(-50%,-50%) rotate(45deg); /* Safari 和 Chrome */
        -o-transform:translate(-50%,-50%) rotate(45deg);
        background-color: #fff;
      }

      >h1{
        width: 100%;
        .setMargin-top(70);
        .fs(35);
        text-align: center;
        color: #121212;
      }
      >h2{
        width: 100%;
        text-align: center;
        font-weight: 400;
        .fs(28);
        color: @dec;
      }

      >div{
        text-align: center;
        >div {
          >h1{
            .fs(28);
          }
          >p{
            .fs(28);
            color:@dec;
          }
        }
      }
    }


  }




}

.select4-list2{
  overflow: hidden;
  .setPadding-bottom(15);
  .setPadding-top(15);
  padding-left: 9%;
}


.select4-list2-left{
  position: absolute;
  width: 15%;
  height:100%;
  left: -8.5%;

}
.select4-list2-right{
  position: relative;
  float: left;

  .setMargin-left(45);
  width: 90%;
  height:100%;
  .fs(28);
  .setLineHeight(30);
}


.select4-list2 span{
  display: inline-block;
  float: left;
  .sw(28);
  .setHeight(28);
  .setLineHeight(28);
  //.setMargin-top(6);
  background-color: #d4d4d4;
  color: #ffffff;
  border-radius: 50%;
  text-align: center;
  .fs(24);
}


.select1-list2{
   overflow: hidden;
  .setPadding-bottom(5);
  >div{
    float: left;
    position: relative;
    .setMargin-left(40);
    width: 98%;
    height:100%;
    .fs(28);
    .setLineHeight(50);
    color: @dec;
    >span{
      display: inline-block;
      position: absolute;
      left: -5%;
      float: left;
      top:9px;
      .sw(14);
      .setHeight(14);
      .setLineHeight(20);
      //.setMargin-top(6);
      background-color: #d4d4d4;
      color: #ffffff;
      border-radius: 50%;
      text-align: center;

    }
  }
}
.solution-jump-detail {
  padding: .35rem 0 .4rem 0;
  text-align: center;
  .jump-text {
    .fs(35);
    span {
      color: #666;
    }
  }
  .jump-area {
    margin-top: .2rem;
    line-height: .3rem;
    .button-item {
      display: inline-block;
      width: 1.42rem;
      .fs(28);
      border: 1px solid #ddd;
      background: url(../img/aboutUs/introduce_arrow.png) no-repeat 70% center;
      background-size: .05rem;
    }
  }
}























